<!--
* @description  参数1
* @fileName  allSale
* @author userName
* @date 2021-04-15 16:39:34
* @version V1.0.0
!-->
<!--
因为路由的原因
这个页面移动到首页
!-->
<template>
    <div id="allSale" class="allSale">
        <!-- <div id="main1" style="width: 600px;height:400px;"></div>
        <div id="main2" style="width: 600px;height:400px;"></div> -->

        <span style="position: relative; left: 430px; font-weight: bold; font-size: 33px">菜品统计图</span>
        <div id="main2" style="width: 1000px; height: 500px"></div>
        <div style="position: relative; top: 50px">
            <span style="position: relative; left: 430px; font-weight: bold; font-size: 33px"> 菜类统计图 </span>
            <div id="main1" style="width: 1000px; height: 500px"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { salebycate, recentmonth } from '../../api/valumes';
import { allcate } from '../../api/cate';
import { selectfood } from '../../api/food';
export default {
    props: {
        // 父辈向子辈传参
    },
    name: 'allSale',
    data() {
        return {
            temp: [],
            option1: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '菜类数据:',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            },
            option2: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '菜品数据:',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            }
        };
    },
    created() {
        // 实例被创建之后执行代码
        allcate()
            .then((res) => {
                for (var i = res.data.catelist.length-1; i >=0 ; i--) {
                    let model = {};
                    model['value'] = 0;
                    model['name'] = res.data.catelist[i].cate_name;
                    this.option1.series[0].data.push(model);
                }
            })
            .catch(() => {
                this.$message.error('出错了哦');
            });
        selectfood()
            .then((res) => {
                for (var i = res.data.length-1; i >=0; i--) {
                    let model2 = {};
                    model2['value'] = 0;
                    model2['name'] = res.data[i].name;
                    this.option2.series[0].data.push(model2);
                }
            })
            .catch(() => {
                this.$message.error('出错了哦');
            });
        salebycate()
            .then((res) => {
                // console.log(res);
                var that = this;
                if (res.code == 200) {
                    // console.log('aaaaaaaaaa');
                    for (var i = 0; i < res.data.result.length; i++) {
                        // console.log('bbbbbbbbbbbbbbbbbbbbb');
                        for (var j = 0; j < that.option1.series[0].data.length; j++) {
                            // console.log('ccccccccccccccccccc');
                            // console.log(res.data.result[i].cate_name);
                            // console.log(that.option1.series[0].data[j].name);
                            // console.log("-----------------------------");
                            if (res.data.result[i].cate_name == that.option1.series[0].data[j].name) {
                                // console.log('res.data.result[i].all_price --' + res.data.result[i].all__price);
                                that.option1.series[0].data[j].value = res.data.result[i].all__price;
                            }
                        }
                    }
                    // console.log(that.option1.series[0].data);
                    that.show1();
                } else {
                    this.$message.error('出错了哦');
                }
            })
            .catch((res) => {
                this.$message.error('出错了哦');
            });

        recentmonth()
            .then((res) => {
                var that = this;
                if (res.code == 200) {
                    // console.log('aaaaaaaaaa');
                    for (var i = 0; i < res.data.result.length; i++) {
                        // console.log('bbbbbbbbbbbbbbbbbbbbb');

                        for (var j = 0; j < that.option2.series[0].data.length; j++) {
                            // console.log('ccccccccccccccccccc');
                            // console.log(res.data.result[i].cate_name);
                            // console.log(that.option1.series[0].data[j].name);
                            // console.log("-----------------------------");
                            if (res.data.result[i].fname == that.option2.series[0].data[j].name) {
                                // console.log((res.data.result[i].count) * (res.data.result[i].fprice));
                                that.option2.series[0].data[j].value = res.data.result[i].count * res.data.result[i].fprice;
                            }
                        }
                    }
                    // console.log(that.option1.series[0].data);
                    that.show2();
                } else {
                    this.$message.error('出错了哦');
                }
            })
            .catch((res) => {
                this.$message.error('出错了哦');
            });
    },
    computed: {
        // 计算属性
    },
    components: {
        // 组件的引用
    },
    methods: {
        // 方法
        show1() {
            // 页面进入时加载内容
            var chartDom = document.getElementById('main1');
            var myChart = echarts.init(chartDom);

            this.option1 && myChart.setOption(this.option1);
        },
        show2() {
            // 页面进入时加载内容
            var chartDom = document.getElementById('main2');
            var myChart = echarts.init(chartDom);

            this.option2 && myChart.setOption(this.option2);
        }
    },
    mounted() {
        // 页面进入时加载内容
    }
};
</script>
<style scoped lang="less"></style>
